<template>
  <div>
    <Vcode
      :show="localIsShow"
      @success="success"
      @close="close"
    />
  </div>
</template>

<script>
  import Vcode from "vue-puzzle-vcode";
  export default {
	name: 'VCode',
	props:{
		isShow: Boolean,
	},
    data(){
      return {
		   localIsShow: this.isShow
      }
    },
    components:{
      Vcode
    },
    methods:{
      // 用户通过了验证
      success(msg){
		this.localIsShow = false;
		this.$emit('success',"验证成功!");
      },
      // 用户点击遮罩层，应该关闭模态框
      close(){
		  this.localIsShow = false;
      }
    },
	  watch: {  
	    // 监听 prop 的变化，并同步到内部状态  
	    isShow(newVal) {  
	      this.localIsShow = newVal;  
	    }  
	  }  
  }
</script>